<template>
  <div class="achievement-container">
    <!-- 当前账号的积分和排名 -->
    <div v-if="currentAccountInfo" class="current-account-info">
      <span class="account-info-left">当前账号：{{ currentAccountInfo.userNumber }}</span>
      <span class="account-info-center">积分排名：{{ currentRank }}</span>
      <van-tag type="danger" color="#7c2d7c" class="points-tag account-info-right">
        {{ currentAccountInfo.points }} 分
      </van-tag>
    </div>

    <van-list>
      <van-cell v-for="(item, index) in sortedJfphList" :key="item.userId" class="rank-item">
        <div class="rank-content">
          <div class="rank-index">{{ index + 1 }}</div>
          <div class="rank-avatar">
            <van-image
                round
                width="60px"
                height="60px"
                :src="item.userImage"
                error-class="error-avatar"
            />
          </div>
          <div class="rank-info">
            <div class="rank-name-number">
              <span class="rank-name">{{ item.userName }}</span>
              <span class="rank-number">学号: {{ item.userNumber }}</span>
            </div>
            <div class="rank-department-points">
              <span class="rank-department">学院: {{ item.department }}</span>
              <span class="rank-points">
                <van-tag type="danger" color="#7c2d7c" class="points-tag">
                  {{ item.points }} 分
                </van-tag>
              </span>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { sortPointsUsingPost } from "../../Api/yonghumokuai.ts";
import {ref, computed, onMounted} from "vue";
import {useUserStore} from "../../Store/modules/userinfo/UserInfo.ts";

const jfphList = ref([]);
const currentAccountInfo = ref(null);

const userInfo = useUserStore()

const currentAccountNumber = userInfo.userInfo.userNumber

onMounted(() => {
  getJFPHList()
})

async function getJFPHList() {
  try {
    const response = await sortPointsUsingPost({
      page: 1,
      pageSize: 5,
    });

    jfphList.value = response.data.data;
    findCurrentAccountInfo();
  } catch (err) {
    console.log(err);
  }
}

function findCurrentAccountInfo() {
  const currentIndex = jfphList.value.findIndex(item => item.userNumber === currentAccountNumber);
  if (currentIndex !== -1) {
    currentAccountInfo.value = jfphList.value[currentIndex];
    currentAccountInfo.value.rank = currentIndex + 1;
  }
}

const sortedJfphList = computed(() => {
  return jfphList.value;
});

const currentRank = computed(() => {
  return currentAccountInfo.value ? currentAccountInfo.value.rank : 'N/A';
});


</script>

<style scoped>
.achievement-container {
  height: 100vh;
  overflow-y: auto;
  padding: 5px;
  background-color: #f8f9fa;
}

.current-account-info {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

.account-info-left {
  color: #333;
}

.account-info-center {
  flex-grow: 1;
  text-align: center;
  color: #7c2d7c;
  font-weight: bold;
}

.account-info-right {
  margin-left: 10px;
}

.rank-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eaeaea;
}

.rank-content {
  display: flex;
  width: 100%;
  align-items: center;
}

.rank-index {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.rank-avatar {
  margin-right: 10px;
}

.rank-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rank-name-number,
.rank-department-points {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.rank-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.rank-number,
.rank-department {
  font-size: 14px;
  color: #666;
}

.rank-points {
  font-size: 18px;
  font-weight: bold;
  color: #7c2d7c;
}

.points-tag {
  padding: 5px;
  margin-left: 5px;
  display: inline-block;
}

.error-avatar {
  background-color: #f5f5f5;
  text-align: center;
  line-height: 60px;
  color: #ccc;
  font-size: 14px;
}
</style>